<script>
import request from "../../../utils/request"
import uniCalendar from "../../components/uni-calendar/components/uni-calendar/uni-calendar.vue"
import shareInfo from "../../../utils/shareInfo"
import websocket from "@/utils/websocket"
import dateUtils from "@/utils/dateUtils"

export default {
  name: "index",
	computed: {
		dateUtils() {
			return dateUtils
		}
	},
  components: { uniCalendar },
  data() {
    return {
      //用户的打卡统计
      userCheckData: {
        currentlyDayDuration: 0,
        totalDayNum: 0,
      },
      //用户有打卡的日期
      userCheckList: [],
      //用户当前选中的打卡日期
      currentSelectedCheckDate: null,
    }
  },
  onLoad() {
    //获取用户的打卡统计
    request({
      url: "userCheckPlan/getUserCheckData",
      errorHandle: true,
      showLoading: true,
    }).then((data) => {
      this.userCheckData = data
    })
  },
  onShow() {
    websocket.trackCurrentPage("学习日志").catch(()=>{})
  },
  methods: {
    //查询日期区间内的打卡信息
    getCheckInfoByDateRange(startDay, endDay) {
      request({
        url: "userCheckPlan/getUserCheckList",
        data: {
          startDay,
          endDay,
        },
        errorHandle: true,
        showLoading: true,
      }).then((data) => {
        this.userCheckList = data
        console.log(this.userCheckList, "this.userCheckList")
      })
    },
    //传入数字类型的 年 月 日，返回格式化的日期字符串 yyyy-MM-dd
    formatDate(year, month, day) {
      let monthStr = month
      let dayStr = day
      if (month < 10) {
        monthStr = "0" + month
      }
      if (day < 10) {
        dayStr = "0" + day
      }
      return year + "-" + monthStr + "-" + dayStr
    },
    //月份切换时触发
    handleMonthSwitch(val) {
      const weeks = val.weeks
      const firstWeeks = weeks[0]
      const lastWeeks = weeks[Object.keys(weeks).length - 1]
      const firstDate = firstWeeks[0]
      const lastDate = lastWeeks[lastWeeks.length - 1]
      this.getCheckInfoByDateRange(
        this.formatDate(val.year, firstDate.month, firstDate.date),
        this.formatDate(val.year, lastDate.month, lastDate.date),
      )
    },
    //点击日期时触发
    handleSelectedDate(val) {
      if (val.extraInfo.data) {
        this.currentSelectedCheckDate = val.extraInfo.data
      } else {
        this.currentSelectedCheckDate = null
      }
    },
  },
  //右上角分享
  async onShareAppMessage() {
    return await shareInfo.getDefaultShareInfo()
  },
}
</script>

<template>
  <view class="page">
    <view class="header">
      <view class="block">
        <view class="number">{{ dateUtils.formatTimeObject(userCheckData.currentlyDayDuration).m }}min</view>
        <view class="label">今日学习</view>
      </view>
      <view class="block">
        <view class="number">{{ userCheckData.totalDayNum }}天</view>
        <view class="label">累计学习</view>
      </view>
      <view class="block">
        <view class="number">{{ userCheckData.userStudyingWordsNum }}个</view>
        <view class="label">已背单词</view>
      </view>
    </view>
    <view class="calendar">
      <uni-calendar
        :showMonth="false"
        ref="uniCalendar"
        :selected="
          userCheckList.map((item) => {
            return {
              date: item.checkDay,
              info: '打卡',
              data: item
            }
          })
        "
        @monthSwitch="handleMonthSwitch"
        @change="handleSelectedDate"
      ></uni-calendar>
      <!--			选择的日期的打卡分钟数-->
      <template v-if="currentSelectedCheckDate">
        <view class="currentSelectedCheckDate">
          <view class="divide-line"></view>
          <view class="content">
            <view class="row title">{{ currentSelectedCheckDate.checkDay }}</view>
            <view class="row normal">学习时长：{{ dateUtils.formatTimeChinese(currentSelectedCheckDate.clockDuration) }}</view>
            <view class="row normal">已背单词：{{ currentSelectedCheckDate.wordsNum }} 个</view>
            <view class="row normal">已掌握单词：{{ currentSelectedCheckDate.rightNum }} 个</view>
            <view class="row normal">未掌握单词：{{ currentSelectedCheckDate.wrongNum }} 个</view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: linear-gradient(to bottom, var(--theme-color), var(--theme-color-light));
	padding: {
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		left: 20rpx;
		right: 20rpx;
	};
	
  .header {
    background: var(--theme-color-light);
    height: 200rpx;
    display: flex;
    border-radius: 100rpx;
    padding: 30rpx 0;

    > .block {
      width: 0;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      &:not(:last-child) {
        border-right: 2rpx solid var(--border-color);
      }

      > .number {
        color: var(--text-color);
        font-size: 40rpx;
        font-weight: bold;
      }

      > .label {
        color: var(--text-color-light);
        font-size: 30rpx;
        margin-top: 4rpx;
      }
    }
  }

  .calendar {
    margin-top: 30rpx;
    overflow: hidden;
    background: var(--theme-color-light);
    border-radius: 30rpx;
		padding: {
			top: 10rpx;
			bottom: 30rpx;
		};

    .currentSelectedCheckDate {
      margin: {
        top: 50rpx;
        left: 50rpx;
        right: 50rpx;
      }

      > .divide-line {
        height: 2rpx;
        background: var(--border-color);
      }

      > .content {
        margin-top: 50rpx;

        > .row {
          margin-bottom: 20rpx;
        }

        > .title {
          font-size: 36rpx;
          font-weight: 500;
        }

        > .normal {
          font-size: 30rpx;
        }
      }
    }
  }
}
</style>
